<template>
  <div class="user-card-box">
    <div class="avatar-box">
      <div class="user-avatar-box">
        <el-avatar class="user-profile-photo" :size="60" :src="user.avatar_url">
          <img :src="defaultImg" alt="默认显示头像">
        </el-avatar>
      </div>
      <h2 style="line-height: 60px; margin-left: 10px;cursor: pointer" @click="goPage('/user/'+ user.username + '')">{{ user.username }}</h2>
    </div>
    <div class="btn-star-box">
      <el-button :class="{'star': !isStared}" type="primary" @click="handleToggleStar" round>{{ isStared ? '已关注' : '关注' }}</el-button>
    </div>
  </div>
</template>

<script>
import {attentionUser, cancelAttentionUser} from "@/api/apis";

export default {
  name: "UserCard",
  props: ['user'],
  data(){
    return {
      defaultImg: 'https://avatar.csdnimg.cn/3/6/5/1_qq_42478566.jpg',
      total: 1,
      isStared: true,
    }
  },
  methods:{
    handleToggleStar(){
      if (this.isStared){
        cancelAttentionUser(this.user.username).then(response => {
          this.isStared = false
          this.$message.success(response.message)
        }).catch(err => {
          this.$message.error(err.data.message)
        })
      }else{
        attentionUser(this.user.username).then(response => {
          this.isStared = true
          this.$message.success(response.message)
        }).catch(err => {
          this.$message.error(err.data.message)
        })
      }
    },
    goPage(url){
      this.$router.push({path:url})
    },
  },
}
</script>

<style scoped>
  .user-card-box {
    background-color: #ffffff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    border-radius: 5px;margin-bottom: 20px;
  }
  .avatar-box{
    height: 60px;
    display: flex;
  }
  .btn-star-box{
    display: flex;
    align-items: center;
  }
  .star{
    background-color: white;
    border: 1px solid #409eff;
    color: #409eff;
  }
</style>
